<template>
  <div class="content">
    <div class="form-box">
      <h2>后台管理系统</h2>
      <el-form
        :model="loginFormData"
        status-icon
        :rules="loginFormRules"
        ref="loginFormRef"
        label-width="60px"
      >
        <el-form-item label="账 号" prop="userName" class="whiteItem">
          <el-input type="text" v-model="loginFormData.userName"></el-input>
        </el-form-item>
        <el-form-item label="密 码" prop="password" class="whiteItem">
          <el-input type="password" v-model="loginFormData.password"></el-input>
        </el-form-item>
        <el-form-item label="验 证" prop="verifty" class="whiteItem">
          <!-- 验证码部分 -->
          <Verify @success="isVerify = true" @error="isVerify = false" 
          :type="3" :showButton ='false' :barSize ='{width:"100%",height:"40px"}'></Verify>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginSubmit">提交</el-button>
          <el-button @click="resetLogin">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 设置验证码
import Verify from 'vue2-verify'
import { ReqUserLogin } from '../../request/index.js'


export default {
  data() {
    return {
      // 验证码验证设置
      isVerify:false,
      loginFormData: {
        userName: "",
        password: "",
      },
      loginFormRules: {
        userName: [
          { required: true, message: "请输入您的账号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入您的密码", trigger: "blur" },
          {
            min: 0,
            max: 16,
            message: "长度在 0 到 16 个字符",
            trigger: "blur",
          },
        ]
      },
    };
  },
  methods: {
    // 提交登录
    async loginSubmit() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid)
          return this.$message({
            showClose: true,
            message: "请将信息填充完整",
            type: "warning",
          });
        if(!this.isVerify) return this.$message({
          showClose: true,
          message: "请完成验证",
          type: "warning",
        })

        const loginData = await ReqUserLogin({
          password: this.loginFormData.password,
          telephone: this.loginFormData.userName,
          isPc:1
        })
        console.log(loginData)
        console.log(loginData.data.id)
        window.sessionStorage.setItem('userId', loginData.data.id)
        const { status, data } = loginData   //登录返回数据
        if(status === 0) {
          const { type, token } = data
          this.$message({
            showClose:true,
            message:'登录成功', 
            type:"success"
          })
          window.sessionStorage.setItem('token', token)
          
          if( type === 3 ) {
            this.$router.push('/home')
          }else if(type === 2) {
            this.$router.push('/home/student/self')
          }
        }else if(status === -1){
          this.$message({
            showClose:true,
            message:"账号或者密码错误",
            type:'warning'
          })
        }

      });
    },
    // 重置登录按钮
    resetLogin() {
      this.$refs.loginFormRef.resetFields()
    }
  },
  components:{
    Verify
  }
};
</script>

<style scoped>
.content {
  background-image: url("../../assets/img/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  min-width: 1366px;
  overflow: hidden;
}
.form-box h2 {
  color: white;
  font-weight: 400;
}
.form-box {
  background: rgba(0, 0, 0, 0.1);
  width: 350px;
  margin: 200px auto;
  padding: 10px 30px;
}
.veriftyImage {
  width: 200px;
  float: left;
}
</style>
